<ion-split-pane contentId="main-content">
  <ion-menu contentId="main-content">
<% if (!props.auth) { -%>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-buttons *ngIf="isWeb" slot="end">
          <ion-menu-toggle auto-hide="false">
            <app-language-selector></app-language-selector>
          </ion-menu-toggle>
        </ion-buttons>
        <ion-title>{{'APP_NAME' | translate}}</ion-title>
      </ion-toolbar>
    </ion-header>
<% } -%>
    <ion-content>
      <div ion-fixed>
<% if (props.auth) { -%>
        <div class="profile ion-text-center ion-padding">
          <ion-icon class="profile-icon" name="person-circle"></ion-icon>
          <div>
            <ion-menu-toggle auto-hide="false">
              <ion-button class="profile-button" color="light" (click)="showProfileActions()"
                          shape="round" fill="outline" size="small" expand="block">
                <ion-icon name="person"></ion-icon> {{username}}
              </ion-button>
            </ion-menu-toggle>
          </div>
        </div>
<% } -%>
        <ion-list lines="full" class="ion-no-padding">
          <ion-menu-toggle auto-hide="false">
            <ion-item [routerDirection]="'root'" routerLink="/home" routerLinkActive="active">
              <ion-label><span translate>Home</span></ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false">
            <ion-item [routerDirection]="'root'" routerLink="/about" routerLinkActive="active">
              <ion-label><span translate>About</span></ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </div>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
